<script lang="ts" setup>
import CodeInfoDetail from "./CodeInfoDetail.vue";
import CodeInfoUpdate from "./CodeInfoUpdate.vue";
import CodeInfoSave from "./CodeInfoSave.vue";
import {CodeInfo} from "./CodeInfo";
import {DehazeFilled} from "@vicons/material";
import {stampToDatetimeText, util} from "../../../../ts/util";
import post from "../../../../axios";
import {IColumn, IPagination} from "../../../../ts/type";
import {h, reactive} from "vue";
import {DataTableSortState, NButton, NSpace} from "naive-ui";


let search = reactive({
  hideColumn: ['id'],
  disabled: false,
  inline: false,
  labelWidth: 'auto',
  labelAlign: 'right',
  labelPlacement: 'top',
  model: {
    keyword: null,
    /*###########auto#start###########*/
    columnCode: null,
    createBy: null,
    createTime: null,
    date: null,
    fixLength: null,
    id: null,
    initValue: null,
    prefix: null,
    updateBy: null,
    updateTime: null,
    /*###########auto##end############*/
    /* append $pageModalFormModelAppender$ */
  },
  showLabel: true,
  size: 'medium',
  items: {
    keyword: {
      label: '关键字',
      path: 'keyword',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('keyword的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        disabled: false,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入关键字',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]keyword的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]keyword的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]keyword的value变为：', value)
        }
      }
    },
    /*###########auto#start###########*/
    columnCode: {
      label: 'column编号',
      path: 'columnCode',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入column编号',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]columnCode的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]columnCode的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]columnCode的value变为：', value)
        }
      }
    },
    createBy: {
      label: '创建人',
      path: 'createBy',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入创建人',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]createBy的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]createBy的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]createBy的value变为：', value)
        }
      }
    },
    createTime: {
      label: '创建时间',
      path: 'createTime',
      span: 8,
      input: {
        defaultValue: null,
        readonly: false,
        type: 'datetimerange',
        onUpdateFormattedValue: (value: string | null) => {
          console.log('[onUpdateFormattedValue]createTime的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]createTime的value变为：', value)
        }
      }
    },
    date: {
      label: '编码日期',
      path: 'date',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入编码日期',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]date的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]date的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]date的value变为：', value)
        }
      }
    },
    fixLength: {
      label: '补齐长度',
      path: 'fixLength',
      span: 4,
      input: {
        clearable: true,
        defaultValue: null,
        loading: null,
        max: null,
        min: null,
        placeholder: '请输入补齐长度',
        precision: 0,
        readonly: false,
        showButton: false,
        onBlur: () => {

        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onUpdateValue: (value: number | null) => {
          console.log('[onUpdateValue]fixLength的value变为：', value)
        }
      }
    },
    initValue: {
      label: '初始值',
      path: 'initValue',
      span: 4,
      input: {
        clearable: true,
        defaultValue: null,
        loading: null,
        max: null,
        min: null,
        placeholder: '请输入初始值',
        precision: 0,
        readonly: false,
        showButton: false,
        onBlur: () => {

        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onUpdateValue: (value: number | null) => {
          console.log('[onUpdateValue]initValue的value变为：', value)
        }
      }
    },
    prefix: {
      label: '表前缀',
      path: 'prefix',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入表前缀',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]prefix的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]prefix的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]prefix的value变为：', value)
        }
      }
    },
    updateBy: {
      label: '修改人',
      path: 'updateBy',
      span: 4,
      input: {
        allowInput: (value: string) => {
          console.log('name的value变为：', value)
          return true
        },
        clearable: true,
        defaultValue: null,
        loading: null,
        maxlength: null,
        minlength: null,
        placeholder: '请输入修改人',
        readonly: false,
        type: 'text',
        onBlur: () => {

        },
        onChange: (value: string | null) => {
          console.log('[onChange]updateBy的value变为：', value)
        },
        onClear: () => {

        },
        onFocus: () => {

        },
        onInput: (value: string | null) => {
          console.log('[onInput]updateBy的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]updateBy的value变为：', value)
        }
      }
    },
    updateTime: {
      label: '修改时间',
      path: 'updateTime',
      span: 8,
      input: {
        defaultValue: null,
        readonly: false,
        type: 'datetimerange',
        onUpdateFormattedValue: (value: string | null) => {
          console.log('[onUpdateFormattedValue]updateTime的value变为：', value)
        },
        onUpdateValue: (value: string | null) => {
          console.log('[onUpdateValue]updateTime的value变为：', value)
        }
      }
    },
    /*###########auto##end############*/
    /* append $pageModalFormItemsAppender$ */
  },
  reset: () => {
    search.model = {
      keyword: null,
      /*###########auto#start###########*/
      columnCode: null,
      createBy: null,
      createTime: null,
      date: null,
      fixLength: null,
      id: null,
      initValue: null,
      prefix: null,
      updateBy: null,
      updateTime: null,
      /*###########auto##end############*/
      /* append $pageModalFormModelAppender$ */
    }
  },
})

let page = reactive<{
  hideColumn: Array<string>
  checkedRowKeys: Array<number | string>,
  columns: Array<IColumn>,
  data: Array<any>
  loading: boolean,
  pagination: IPagination,
  loadData: Function,
  changeSort: Function,
  options: any
}>({
  hideColumn: ['id', 'createBy', 'updateBy', 'createTime', 'updateTime'],
  checkedRowKeys: [],
  columns: [
    {
      title: "序号", key: "index", render: (row: CodeInfo, index: number) => {
        row.keyword = index + ''
        return index + 1
      }
    },
    {title: "ID", key: "id", sorter: true, defaultSortOrder: "descend"},
    /*###########auto#start###########*/
    {title: "column编号", key: "columnCode"},
    {title: "创建人", key: "createBy"},
    {title: "创建时间", key: "createTime"},
    {title: "编码日期", key: "date"},
    {title: "补齐长度", key: "fixLength"},
    {title: "初始值", key: "initValue"},
    {title: "表前缀", key: "prefix"},
    {title: "修改人", key: "updateBy"},
    {title: "修改时间", key: "updateTime"},
    /*###########auto##end############*/
    /* append $pageFieldAppender$ */
    /* append $pageRelateAppender$ */
    /* append $pageDictAppender$ */
    {
      title: "操作", key: "action", render: (row: CodeInfo) => {
        return h(
            NSpace,
            {},
            (): any => {
              return [
                h(
                    NButton,
                    {
                      type: "info",
                      onClick: () => {
                        modal.update = true
                        modal.id = row.id
                      }
                    },
                    () => {
                      return "编辑"
                    }
                ),
                h(
                    NButton,
                    {
                      onClick: () => {
                        modal.detail = true
                        modal.id = row.id
                      }
                    },
                    () => {
                      return "详情"
                    }
                ),
                h(
                    NButton,
                    {
                      type: "warning",
                      onClick: () => {
                        util.confirm(
                            "确定删除吗？",
                            () => {
                              post("/cloud-code/codeInfo/auto/delete", {id: row.id}).then(() => {
                                page.loadData()
                              })
                            }
                        )
                      }
                    },
                    () => {
                      return "删除"
                    }
                )
              ]
            }
        )
      }
    }
  ],
  data: [],
  loading: false,
  pagination: {
    itemCount: 0,
    showSizePicker: true,
    showQuickJumper: true,
    pageSizes: [10, 20, 50, 100],
    onUpdatePage: (pageNum: number) => {
      page.pagination.page = pageNum
      page.loadData()
    },
    onUpdatePageSize: (pageSize: number) => {
      page.pagination.pageSize = pageSize
      page.loadData()
    }
  },
  loadData: () => {
    page.loading = true
    post("/cloud-code/codeInfo/auto/page", Object.assign({}, page.pagination, search.model)).then((res: any) => {
      page.data = res.list
      page.pagination.itemCount = res.total
    }).finally(() => {
      page.loading = false
    })
  },
  changeSort: (options: DataTableSortState) => {
    if (options.order === false) options.order = "descend"
    page.pagination.desc = options.order === "descend"
    page.loadData()
  },
  options: {}
})

/* append $commonOptionsAppender$ */

let modal = reactive<{
  save: boolean,
  update: boolean,
  detail: boolean,
  id: number | null
}>({
  save: false,
  update: false,
  detail: false,
  id: null
})

page.loadData()
</script>

<template>
  <n-card title="自动编码信息">
    <n-form
        :model="search.model"
    >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi v-if="!search.hideColumn.includes('keyword')" v-bind="search.items.keyword">
          <n-input v-model:value="search.model.keyword" v-bind="search.items.keyword.input"/>
        </n-form-item-gi>
        /*###########auto#start###########*/
        <n-form-item-gi v-if="!search.hideColumn.includes('columnCode')" v-bind="search.items.columnCode">
          <n-input v-model:value="search.model.columnCode" v-bind="search.items.columnCode.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('createBy')" v-bind="search.items.createBy">
          <n-input v-model:value="search.model.createBy" v-bind="search.items.createBy.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('createTime')" v-bind="search.items.createTime">
          <n-date-picker v-model:value="search.model.createTime" v-bind="search.items.createTime.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('date')" v-bind="search.items.date">
          <n-input v-model:value="search.model.date" v-bind="search.items.date.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('fixLength')" v-bind="search.items.fixLength">
          <n-input-number v-model:value="search.model.fixLength" v-bind="search.items.fixLength.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('initValue')" v-bind="search.items.initValue">
          <n-input-number v-model:value="search.model.initValue" v-bind="search.items.initValue.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('prefix')" v-bind="search.items.prefix">
          <n-input v-model:value="search.model.prefix" v-bind="search.items.prefix.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('updateBy')" v-bind="search.items.updateBy">
          <n-input v-model:value="search.model.updateBy" v-bind="search.items.updateBy.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!search.hideColumn.includes('updateTime')" v-bind="search.items.updateTime">
          <n-date-picker v-model:value="search.model.updateTime" v-bind="search.items.updateTime.input"/>
        </n-form-item-gi>
        /*###########auto##end############*/
        /* append $pageTemplateFormAppender$ */
      </n-grid>

      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="12">
          <n-space>
            <n-button
                v-limitClick="3000"
                type="primary"
                @click="page.loadData">
              搜索
            </n-button>
            <n-button
                v-limitClick="3000"
                type="info"
                @click="search.reset">
              重置
            </n-button>
          </n-space>
        </n-form-item-gi>
        <n-form-item-gi :span="12">
          <n-space justify="end">
            <n-button
                type="success"
                @click="modal.save = true">
              新增
            </n-button>
            <n-popselect v-model:value="page.hideColumn" :options="page.columns.map(c => {return {label: c.key, value: c.key}})" multiple
                         scrollable>
              <n-button>
                <n-icon>
                  <DehazeFilled/>
                </n-icon>
              </n-button>
            </n-popselect>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-data-table
        :bordered="false"
        :checked-row-keys="page.checkedRowKeys"
        :columns="page.columns.filter(c => !page.hideColumn.includes(c.key))"
        :data="page.data"
        :loading="page.loading"
        :pagination="page.pagination"
        :row-key="(row: any) => row.id"
        remote
        @update:sorter="page.changeSort"
    />
  </n-card>
  <CodeInfoSave :options="page.options" :show="modal.save"
                @close="modal.save = false" @refresh="page.loadData"/>
  <CodeInfoUpdate :id="modal.id" :options="page.options" :show="modal.update"
                  @close="modal.update = false" @refresh="page.loadData"/>
  <CodeInfoDetail :id="modal.id" :options="page.options" :show="modal.detail"
                  @close="modal.detail = false" @refresh="page.loadData"/>
</template>

<style scoped>

</style>